/* 
 * @Author: 21克的爱情
 * @Date: 2020-09-03 14:59:23
 * @Email: raohong07@163.com
 * @LastEditors: 21克的爱情
 * @LastEditTime: 2020-10-04 19:14:36
 * @Description: 视频item
 */
import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:flustars/flustars.dart';
import 'package:ki5k_video/pages/home/video/video_detail_page.dart';

class VideoItemWidget extends StatelessWidget {
  final String vodId;
  final String vodName;
  final String vodPic;
  final String vodRemarks;
  final AnimationController animationController;
  final Animation animation;

  const VideoItemWidget({Key key,
    this.vodId,
    this.vodName: "",
    this.vodPic: "",
    this.vodRemarks,
    this.animationController,
    this.animation
  }): super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animationController,
      builder: (BuildContext context, Widget child) {
        return FadeTransition(
          opacity: animation,
          child: new Transform(
            transform: new Matrix4.translationValues( 0.0, 30 * (1.0 - animation.value), 0.0 ),
            child: InkWell(
              onTap: () {
                // print('当前点击${listDatas[index].vodId}');
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (_){
                    return VideoDetailPage( int.parse(vodId) );
                  })
                );
              },
              child: Container(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Expanded(
                      child: Stack(
                        children: [
                          // vodPic ? Container(
                          //   alignment: Alignment.center,
                          //   decoration: BoxDecoration(
                          //     color: Colors.grey[300],
                          //     borderRadius: BorderRadius.all(Radius.circular(5)),
                          //   ),
                          //   child: Icon(
                          //     Icons.image,
                          //     size: 30,
                          //     color: Colors.grey[600],
                          //   )
                          // ) : 
                          ExtendedImage.network(
                            vodPic ?? 'https://via.placeholder.com/135x180?text=loading',
                            fit: BoxFit.cover,
                            width: double.infinity,
                            height: double.infinity,
                            shape: BoxShape.rectangle,
                            borderRadius: BorderRadius.all(Radius.circular(5)),
                          ),
                          vodRemarks.isNotEmpty ? Positioned(
                            top: 0,
                            right: 0,
                            child: Container(
                              padding: EdgeInsets.all(5),
                              decoration: BoxDecoration(
                                color: Colors.red,
                                borderRadius: BorderRadius.only(
                                  bottomLeft: Radius.circular(5),
                                  topRight: Radius.circular(5),
                                )
                              ),
                              child: Text(
                                '${vodRemarks.length < 8 ? vodRemarks : vodRemarks.substring(0,8)}',
                                overflow: TextOverflow.clip,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: ScreenUtil.getInstance().getSp(9)
                                )
                              ),
                            )
                          ) : Container(),
                        ]
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(
                        top: 5
                      ),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '${vodName}',
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: ScreenUtil.getInstance().getSp(12)
                        ),
                      )
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}
